import React, {memo, useState, useEffect} from 'react'
import {Button, Tag, Radio} from 'antd'
import {connect, history} from 'umi'
import moment from 'moment'
import styles from './index.less'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import {checkType, typeStauts} from './dict'
import {getTaskList} from '@/service/storage/inventoryTask'

const formItemLayout = {
	labelCol: {flex: '90px'},
	wrapperCol: {flex: '1'},
}
const Index = memo(() => {
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [loading, setLoading] = useState(false)
	const [total, setTotal] = useState(0)
	const [tableList, setTableList] = useState<any[]>([])
	const [formData, setFormData] = useState<any[]>([])
	const [searchData, setSearchData] = useState({})
	const [topList, setTopList] = useState<any>([])
	const [radioValue, setRadioValue] = useState<number>(4)
	// 表头
	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'input',
						label: '任务编号',
						name: 'id',
						key: 'id',
						//   fieldNames: {
						//     label: 'name',
						//     value: 'id',
						//     children: 'cityInfoList',
						//   },
						//   items: [],
					},
					{
						type: 'input',
						label: '任务分配人',
						name: 'createUserName',
						key: 'createUserName',
						//   keys: 'id',
						//   title: 'name',
						//   items: [],
					},
					{
						type: 'select',
						name: 'type',
						key: 'type',
						label: '任务类型',
						keys: 'key',
						title: 'label',
						items: [...checkType],
					},
				],
			},
		]
		setFormData(formItems)
	}, [checkType])
	// 表头查询
	const onFinish = (values: any) => {
		setSearchData(values)
		setParams({
			current: 1,
			size: 10,
		})
	}
	// 重置表单
	const onReset = () => {
		setSearchData({})
		setParams({
			current: 1,
			size: 10,
		})
	}
	// 列表
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			align: 'center',
			width: 60,
			defaultSortOrder: 'ascend',
			render(text: any, record: any, index: number) {
				return <span>{(params.current - 1) * 10 + index + 1}</span>
			},
		},
		{
			title: '任务类型',
			dataIndex: 'type',
			align: 'center',
			width: 200,
			render: (text: any, record: any) => (
				<>
					{checkType?.map((item: {key: any; label: string}) => {
						if (item?.key === text) {
							return (
								<Tag color="processing" key={record?.type}>
									{item?.label}
								</Tag>
							)
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '任务编号',
			dataIndex: 'id',
			align: 'center',
			width: 140,
		},
		{
			title: '任务分配人',
			dataIndex: 'createUserName',
			align: 'center',
			width: 150,
		},
		// 分配时间
		{
			title: '分配时间',
			dataIndex: 'createTime',
			align: 'center',
			width: 180,
		},
		{
			title: '任务状态',
			dataIndex: 'status',
			align: 'center',
			width: 120,
			render: (text: any, record: any) => (
				<>
					{typeStauts?.map((item: {key: any; label: string}) => {
						if (item?.key === text) {
							return (
								<Tag color="processing" key={record?.status}>
									{item?.label}
								</Tag>
							)
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '任务开始时间',
			dataIndex: 'beginTime',
			align: 'center',
			width: 150,
			render: (text: string) => moment(text).format('YYYY/MM/DD'),
		},
		{
			title: '任务结束时间',
			dataIndex: 'endTime',
			align: 'center',
			width: 150,
			render: (text: string) => moment(text).format('YYYY/MM/DD'),
		},
		{
			title: '任务触达次数',
			dataIndex: 'count',
			align: 'center',
			width: 100,
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 100,
			render: (text: any, record: {id: any; status: number}) => (
				<div>
					{/* <Permissions permissionID="amc_assetCenter_carMessage_target_view"> */}
					<Button
						type="link"
						size="small"
						onClick={() => {
							history.push({
								pathname:
									'/storage/assetInventory/inventoryTask/view/detail',
								query: {
									id: record.id,
									statusType:
										record.status === 0 ||
										record.status === 2
											? 'detail'
											: 'edit',
								},
							})
						}}>
						{record.status === 0 || record.status === 2
							? '查看任务'
							: '处理'}
					</Button>
					{/* </Permissions> */}
				</div>
			),
		},
	]

	// 获取表格数据
	const onListFun = () => {
		setLoading(true)
		getTaskList({
			...params,
			...searchData,
			status: radioValue === 4 ? '' : radioValue,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data?.page?.records)
					setTotal(res?.data?.page?.total)
					const list = [
						{value: 4, label: `全部 ${res?.data?.allCount}`},
						{
							value: 0,
							label: `未开始 ${res?.data?.startStatus}`,
						},
						{
							value: 1,
							label: `进行中 ${res?.data?.ongoingStatus}`,
						},
						{
							value: 2,
							label: `已完成 ${res?.data?.completedStatus}`,
						},
						{
							value: 3,
							label: `已逾期 ${res?.data?.overdueStatus}`,
						},
					]
					setTopList(list)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}
	useEffect(() => {
		onListFun()
	}, [params, radioValue])
	const handleModeChange = (e: any) => {
		setRadioValue(e?.target?.value)
	}
	return (
		<div className={styles.page}>
			<div className="search">
				{formData && (
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				)}
			</div>
			<Radio.Group
				options={topList}
				onChange={handleModeChange}
				value={radioValue}
				optionType="button"
			/>
			{/* {topList.map((item: any) => (
				<Button
					onClick={() => handleModeChange(item.key)}
					key={item.key}
					style={{margin: '0 5px', marginBottom: 10, marginTop: 20}}>
					{item.label}
					<span style={{marginLeft: 15}}>{item.status}</span>
				</Button>
			))} */}
			<div className="table">
				<CustomTable
					kid="carPlateNo"
					params={params}
					columns={columns}
					pagination
					total={total}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={tableList}
				/>
			</div>
		</div>
	)
})

export default connect(({user}: any) => ({user}))(Index)
